<template>
  <div>
    <el-upload
      :http-request="fnUploadRequestFiles"
      :on-success="uploadSuccessFiles"
      :before-remove="uploadRemoveFiles"
      :before-upload="beforeFileUpload"
      :file-list="fileList"
      accept=".xls,.xlsx,.xlsm,.xlt,.xltx,.xltm,.docx,.doc,.docm,.dotx,.dotm,.dot,.ppt,.apk,.pdf"
      action="">
      <el-button type="primary" size="mini">添加附件</el-button>
      <span class="additional">{{ tip }}</span>
    </el-upload>
  </div>
</template>
<script>
import oss from '@/utils/aliyunOssCommon'
export default {
  name: 'FileUpload',
  props: {
    tip: {
      type: String,
      default: '上传文件小于 50M,word、pdf、wps、Excel'
    },
    size: {
      type: Number,
      default: 50
    },
    fileList: {
      type: Array,
      default: () => []
    },
    path: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      arrayImageUrl: []
    }
  },
  mounted() {
    if (this.fileList.length > 0) {
      this.arrayImageUrl = this.getUrlArr(this.fileList)
    }
  },
  methods: {
    // 抛出路径数组
    getUrlArr(fileList) {
      this.arrayImageUrl = []
      for (let i = 0; i < fileList.length; i++) {
        try {
          if (fileList[i].response !== undefined) {
            const responseName = fileList[i].response.name
            // console.log(fileList[i].response)
            const imgUrl = 'https://res.huberbuy.com/' + responseName
            if (this.arrayImageUrl.indexOf(imgUrl) < 0) {
              // this.arrayImageUrl.push()
              this.arrayImageUrl.push('https://res.huberbuy.com/' + fileList[i].response.name)
            }
          } else {
            this.arrayImageUrl.push(fileList[i].url)
          }
        } catch (e) {
          console.log(e)
        }
      }
      return this.arrayImageUrl
    },
    // 文件上传之前
    beforeFileUpload(file) {
      const isLt50M = file.size / 1024 < 1024 * this.size
      if (!isLt50M) {
        this.$message.error('文件大小' + this.size + 'MB以下')
        return false
      }
      return true
    },
    // 文件上传成功
    uploadSuccessFiles(response, file, fileList) {
      this.$emit('arrayImageUrl', this.getUrlArr(fileList))
    },
    // 附件提交到服务器
    async fnUploadRequestFiles(option) {
      oss.ossUploadFile(option, this.path)
    },
    // 删除文件附件
    uploadRemoveFiles(file, fileList) {
      // if (file.response !== undefined) {
      //   const removeUrl = 'https://res.huberbuy.com/' + this.path + file.name
      //   const arr = []
      //   for (let i = 0; i < this.arrayImageUrl.length; i++) {
      //     if (this.arrayImageUrl[i] !== removeUrl) {
      //       arr.push(this.arrayImageUrl[i])
      //     }
      //   }
      //   this.arrayImageUrl = arr
      //   this.$emit('arrayImageUrl', this.arrayImageUrl)

      let removeUrl = ''
      if (file.response !== undefined) {
        removeUrl = 'https://res.huberbuy.com/' + file.response.name
      } else {
        removeUrl = file.url
      }
      const arr = []
      for (let i = 0; i < this.arrayImageUrl.length; i++) {
        if (this.arrayImageUrl[i] !== removeUrl) {
          arr.push(this.arrayImageUrl[i])
        }
      }
      this.arrayImageUrl = arr
      this.$emit('arrayImageUrl', this.arrayImageUrl)
    }
  }
}
</script>
<style>
  .additional{
    margin-left: 30px;
    font-size: 12px;
    color: #ccc;
  }
</style>
